<template>
  <van-sticky z-index="100">
    <van-nav-bar
      title="评价"
      left-text="返回"
      left-arrow
      @click-left="onBack"
    />
  </van-sticky>
  <div class="item">
    <div class="header">
      <div class="left">
        订单号：<span>{{ list.code }}</span>
      </div>
      <div class="right">总金额：{{ list.amount }}</div>
    </div>

    <div class="content">
      <van-card
        v-for="son in list.order_product"
        :key="son.id"
        :num="son.nums"
        :price="son.total"
        :title="son.products.name"
        :thumb="son.products.thumb_cdn"
      >
        <template #desc>
          <span>商品单价：￥{{ son.price }}</span>
        </template>
      </van-card>
    </div>
  </div>

  
  <van-cell-group inset>
  <van-field
    v-model="message"
    rows="2"
    autosize
    label="评价"
    type="textarea"
    maxlength="50"
    placeholder="请输入评价"
    show-word-limit
  />
</van-cell-group>

<div class="rate">
  <span>评分：</span><van-rate v-model="value" :count="5" />
  </div>

<div class="img">上传图片：</div>
<van-uploader v-model="fileList" multiple :max-count="3" class="img"/>

<div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit" @click="toSubmit">
      提交
    </van-button>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref, reactive, onMounted } from "vue";

const value = ref();
const message = ref();
const { proxy } = getCurrentInstance();
const id = ref(proxy.$route.query.id ? proxy.$route.query.id : 0);
const business = reactive(
  proxy.$cookies.get("business") ? proxy.$cookies.get("business") : {}
);

const list = ref([]);

const fileList = ref([]);

const flag=ref(0);


onMounted(() => {
  getOrderData();
});

const getOrderData = async () => {
  let data = {
    busid: business.id,
    id: id.value,
    // businessaddrid:'0'
  };
  // console.log(data);
  let result = await proxy.$api.OrderDetail(data);

  if (result.code === 0) {
    proxy.$showNotify({
      type: "warning",
      message: result.msg,
      duration: 1500,
    });

    return;
  }

  // let Data = result.data;
  // address.value = result.data.address;
  list.value = result.data.list;
  // list.value = list.value.concat(Data.list);
};

const toSubmit = async () => {
  // let imgList = [];
  // for(let item of fileList.value){
  //   imgList.push({
  //           url:item?.file,
  //       });
  // }
  // console.log(imgList);
  // console.log(fileList.value);
  let data = {
    busid: business.id,
    orderid: id.value,
    rate: value.value?value.value:'',
    comment: message.value?message.value:''
  };
  // console.log(fileList.value);
  for(let item of fileList.value){
        data.proming = item?.file;
        
        let result = await proxy.$api.ProductComment(data);
        // console.log(11);
        if(result.code === 0){
          proxy.$showNotify({
            type:'warning',
            message:result.msg,
            duration:1500
          });

        return;
        }
        flag.value=1;
        
  };
  // console.log(flag.value);
  // console.log(flag.value);
  // data.proming = null;
  if(flag.value===1){

        
        proxy.$showNotify({
            type:'success',
            message:'评价成功',
            duration:1500,
            onClose:() => {
                proxy.$router.go(-1);
            }
        });
        console.log(333);
        return;
  }else{
    console.log(flag.value);
    let result = await proxy.$api.ProductComment(data);
    if(result.code === 1)
    {
        proxy.$showNotify({
            type:'success',
            message:result.msg,
            duration:1500,
            onClose:() => {
                proxy.$router.go(-1);
            }
        });

        return;
    }else{
        proxy.$showNotify({
            type:'warning',
            message:result.msg,
            duration:1500
        });

        return;
    }
  }
  // console.log(222);
  
  
  // console.log(data.proimg);
  // let result = await proxy.$api.ProductComment(data);

}

const onBack = () => {
  proxy.$router.go(-1);
  return;
};
</script>

<style>
.header {
  display: flex;
  justify-content: space-between;
  /* padding: 0 10px; */
}

.item .left span {
  font-size: 14px;
  font-weight: bold;
}

.item {
  padding: 5px 5px 3px;
  background: #fff;
  margin-bottom: 5px;
}

.item .header .left {
  font-size: 13px;
}

.item .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.item .footer .date {
  font-weight: bold;
}
.rate{
  width: 33vw;
  font-size: 3vw;
  margin: 0 3vw;
  margin-top: 2vw;
}
.img{
  font-size: 3vw;
  margin: 2vw 3vw;
}
</style>